<template>
  <div class="scroll-banner" ref="scroll-banner">
    <div class="address">杭州市</div>
    <div class="search"></div>
    <mt-swipe :auto="4000">
      <mt-swipe-item>
        <div style="width: 100%;height: 100%;background: #00b43c">
          1
        </div>
      </mt-swipe-item>
      <mt-swipe-item>
        <div style="width: 100%;height: 100%;background: #989fb4">
          1
        </div>
      </mt-swipe-item>
      <mt-swipe-item>
        <div style="width: 100%;height: 100%;background: #b42623">
          1
        </div>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  import "mint-ui/lib/style.css"
  import { Swipe, SwipeItem } from 'mint-ui'
    export default {
        name: "scrollBanner",
        mounted() {
          let clientWidth = document.body.clientWidth
          this.$refs['scroll-banner'].style.height = (clientWidth/75*44)+'px'
        }
    }
</script>

<style scoped lang="stylus">
  .scroll-banner
    color #2b81af
    position relative
    .address
      position absolute
      top 20px
      left 10px
      width 56px
      height 26px
      background rgba(0,0,0,0.1) url("arrow_bottom.svg") no-repeat 53px center / 8px 4px
      z-index 1000
      font-size 14px
      line-height 26px
      color #ffffff
      border-radius 13px
      padding-right 10px
      &:active
        background rgba(255,209,33,.8) url("arrow_bottom.svg") no-repeat 53px center / 8px 4px

    .search
      position absolute
      top 20px
      right 10px
      z-index 1000
      width 26px
      height 26px
      border-radius 13px
      background rgba(0,0,0,.1) url("btn-search.svg")no-repeat center center /16px 17px
</style>
